﻿<MRow>
    <MCol Cols="12"
          Sm="6"
          Md="4">
        <MMenu @bind-Value="_menu"
               CloseOnContentClick="false"
               Transition="scale-transition"
               OffsetY
               MinWidth="@("auto")">
            <ActivatorContent>
                <MTextField @bind-Value="_date"
                            Label="Picker in menu"
                            PrependIcon="mdi-calendar"
                            Readonly
                            @attributes="context.Attrs"></MTextField>
            </ActivatorContent>
            <ChildContent>
                <MDatePicker @bind-Value="_date"
                             NoTitle
                             Scrollable>
                    <MSpacer></MSpacer>
                    <MButton Text
                             Color="primary"
                             OnClick="MenuCancel">
                        Cancel
                    </MButton>
                    <MButton Text
                             Color="primary"
                             OnClick="MenuOK">
                        OK
                    </MButton>
                </MDatePicker>
            </ChildContent>
        </MMenu>
    </MCol>
    <MSpacer></MSpacer>
    <MCol Cols="12"
          Sm="6"
          Md="4">
        <MDialog @bind-Value="_modal"
                 Persistent
                 Width="290">
            <ActivatorContent>
                <MTextField @bind-Value="_date"
                            Label="Picker in dialog"
                            PrependIcon="mdi-calendar"
                            Readonly
                            @attributes="context.Attrs"></MTextField>
            </ActivatorContent>
            <ChildContent>
                <MDatePicker @bind-Value="_date"
                             Scrollable>
                    <MSpacer></MSpacer>
                    <MButton Text
                             Color="primary"
                             OnClick="ModalCancel">
                        Cancel
                    </MButton>
                    <MButton Text
                             Color="primary"
                             OnClick="ModalOK">
                        OK
                    </MButton>
                </MDatePicker>
            </ChildContent>
        </MDialog>
    </MCol>
    <MCol Cols="12"
          Sm="6"
          Md="4">
        <MMenu @bind-Value="_menu2"
               CloseOnContentClick="false"
               NudgeRight="40"
               Transition="scale-transition"
               OffsetY
               MinWidth="@("auto")">
            <ActivatorContent>
                <MTextField @bind-Value="_date"
                            Label="Picker without buttons"
                            PrependIcon="mdi-calendar"
                            Readonly
                            @attributes="context.Attrs"></MTextField>
            </ActivatorContent>
            <ChildContent>
                <MDatePicker @bind-Value="_date"
                    OnInput="()=>_menu2=false"></MDatePicker>
            </ChildContent>
        </MMenu>
    </MCol>
    <MSpacer></MSpacer>
</MRow>

@code {
    private DateOnly _prevDate = DateOnly.FromDateTime(DateTime.Now);
    private DateOnly _date = DateOnly.FromDateTime(DateTime.Now);
    private bool _menu;
    private bool _modal;
    private bool _menu2;

    public void MenuCancel()
    {
        _date = _prevDate;
        _menu = false;
    }

    public void MenuOK()
    {
        _prevDate = _date;
        _menu = false;
    }

    public void ModalCancel()
    {
        _date = _prevDate;
        _modal = false;
    }

    public void ModalOK()
    {
        _prevDate = _date;
        _modal = false;
    }
}

